{extend name="base"/}
{block name="content"}
<div id="header-frame">
    {include file="public:top" /}
    <script type='text/javascript' src='__STATIC__/admin/uploadajax/js/jquery-2.0.3.min.js'></script>
    <script type='text/javascript' src='__STATIC__/admin/uploadajax/js/jquery.form.js'></script>
    <link href="__STATIC__/admin/uploadajax/css/style.css" type="text/css" rel="stylesheet"/>
    <link href="__STATIC__/admin/css/add_goods.css" type="text/css" rel="stylesheet"/>
</div>
<div id="frame-body">
    <div id="menu-frame" style="width: 100%;float: left;">
        {include file="public:menu" /}
    </div>
    <div id="main-frame" style="float: left;">
        <div id="dcMain" style="margin-left: 0px;width: 1682px;">
            <!-- 当前位置 -->
            <div id="urHere">DouPHP 管理中心<b>></b><strong>添加分类</strong> </div>   <div class="mainBox" style="height:auto!important;height:550px;min-height:550px;">
            <h3>添加商品</h3>
            <form id='myupload' action="{:url('banner/uploadifyImg')}" method='post' enctype='multipart/form-data'>
            	<style>
            		.tableBasic tr td,th{
            			height: 40px;
            		}
            	</style>
                <table width="100%" border="0" cellpadding="8" cellspacing="0" class="tableBasic">
                    <tr>
                        <td width="80" align="right">产品名称</td>
                        <td>
                            <input type="text" id="products_name" name="products_name" value="" size="20" class="inpMain" />
                            <span></span>		
                        </td>                         				                      
                    </tr>
                    <tr>
                        <td align="right">商品卖点</td>
                        <td>
                            <input name="products_introduction"  id="products_introduction"  size="60" class="inpMain"/>
                            <span></span>
                        </td>
                    </tr>
                    <tr>
                        <td width="80" align="right">上传商品图</td>
                        <td>
                        <div class="uploadDiv">
                        	<div>
                        		<h6>商品主图</h6>

                        		<img class="file_img" src="__STATIC__/admin/images/icon-add.png" style="width:120px;"/>
                        		<div class="positionAdjustment">
                        			<span onclick="left(this)" class="left"><img src="__STATIC__/admin/images/left.png" style="width:20px;"/></span>
                        			<span onclick="right(this)" class="right"><img src="__STATIC__/admin/images/right.png" style="width:20px;"/></span>
                        		</div>
                                <div class="progress">
                                    <div class="progress-bar" ><span class="percent"></span></div>
                                </div>
                        	</div>
                        	<input type="file" name="images"/>
                            <input type="hidden" name="img[]" class="proimg" value=""/>
                        </div>
                        <div class="uploadDiv">
                        	<div>
                        		<img class="file_img" src="__STATIC__/admin/images/icon-add.png" style="width:120px;"/>
                        		<div class="positionAdjustment">
                                    <span onclick="left(this)" class="left"><img src="__STATIC__/admin/images/left.png" style="width:20px;"/></span>
                                    <span onclick="right(this)" class="right"><img src="__STATIC__/admin/images/right.png" style="width:20px;"/></span>
                        		</div>
                                <div class="progress">
                                    <div class="progress-bar" ><span class="percent"></span></div>
                                </div>
                        	</div>
                        	<input type="file" name="images"/>
                            <input type="hidden" name="img[]"  class="proimg" value=""/>
                        </div>
                        <div class="uploadDiv">
                        	<div>
                        		<img class="file_img" src="__STATIC__/admin/images/icon-add.png" style="width:120px;"/>
                        		<div class="positionAdjustment">
                                    <span onclick="left(this)" class="left"><img src="__STATIC__/admin/images/left.png" style="width:20px;"/></span>
                                    <span onclick="right(this)" class="right"><img src="__STATIC__/admin/images/right.png" style="width:20px;"/></span>
                        		</div>
                                <div class="progress">
                                    <div class="progress-bar" ><span class="percent"></span></div>
                                </div>
                            </div>
                            <input type="file" name="images"/>
                            <input type="hidden" name="img[]" class="proimg" value=""/>
                        </div>
                        <div class="uploadDiv">
                        	<div>
                        		<img class="file_img" src="__STATIC__/admin/images/icon-add.png" style="width:120px;"/>
                        		<div class="positionAdjustment">
                                    <span onclick="left(this)" class="left"><img src="__STATIC__/admin/images/left.png" style="width:20px;"/></span>
                                    <span onclick="right(this)" class="right"><img src="__STATIC__/admin/images/right.png" style="width:20px;"/></span>
                        		</div>
                                <div class="progress">
                                    <div class="progress-bar" ><span class="percent"></span></div>
                                </div>
                            </div>
                            <input type="file" name="images"/>
                            <input type="hidden" name="img[]" class="proimg" value=""/>
                        </div>
                            <div class="uploadDiv">
                                <div>
                                    <img class="file_img" src="__STATIC__/admin/images/icon-add.png" style="width:120px;"/>
                                    <div class="positionAdjustment">
                                        <span onclick="left(this)" class="left"><img src="__STATIC__/admin/images/left.png" style="width:20px;"/></span>
                                        <span onclick="right(this)" class="right"><img src="__STATIC__/admin/images/right.png" style="width:20px;"/></span>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar" ><span class="percent"></span></div>
                                    </div>
                                </div>
                                <input type="file" name="images"/>
                                <input type="hidden" name="img[]" class="proimg" value=""/>
                            </div>
                            <input type="hidden" name="urlRoute" value="products/imgs"/>
                        <script>
                        	$(".uploadDiv").on("change","input",function(){
                        	    var that=this;
                                var progress = $(this).prev().children(".progress");
                                var progress_bar = progress.children(".progress-bar");
                                var percent = progress_bar.children('.percent');
                                    $("#myupload").ajaxSubmit({
                                        dataType:  'json', //数据格式为json
                                        beforeSend: function() { //开始上传
                                            progress.show();
                                            var percentVal = '0%';
                                            progress_bar.width(percentVal);
                                            percent.html(percentVal);
                                        },
                                        uploadProgress: function(event, position, total, percentComplete) {
                                            var percentVal = percentComplete + '%'; //获得进度
                                            progress_bar.width(percentVal); //上传进度条宽度变宽
                                            percent.html(percentVal); //显示上传进度百分比
                                        },
                                        success: function(data) {
                                            console.log(data);
                                            if(data.state == 1){
                                                var src = data.path;
                                                $(that).prev().children("img").attr('src',src);
                                                $(that).next(".proimg").val(src);
                                                //$(".res").html("上传图片"+data.name+"成功，图片大小："+data.size+"K,文件地址："+data.url);
                                            }else{
                                                $(".res").html(data.errmsg);
                                            }
                                            progress.hide();
                                        },
                                        error:function(xhr){ //上传失败
                                            alert("上传失败");
                                            progress.hide();
                                        }
                                    });
                                })
                        	function right(that){
                        		var imgUrl=$(that).parents(".uploadDiv").next().find(".file_img").attr("src");
                        		var vimgUrl=$(that).parents(".uploadDiv").children(".proimg").val();
                        		var imgUrlNew=$(that).parent().prev().attr("src");
                        		var vimgUrlNew=$(that).parents(".uploadDiv").next().children(".proimg").attr('value');
                        		$(that).parent().prev().attr("src",imgUrl);
                                $(that).parents(".uploadDiv").children(".proimg").attr('value',vimgUrlNew);
                        		$(that).parents(".uploadDiv").next().find(".file_img").attr("src",imgUrlNew);
                                $(that).parents(".uploadDiv").next().children(".proimg").attr('value',vimgUrl);
                        	}
                        	function left(that){
                        		var imgUrl=$(that).parents(".uploadDiv").prev().find(".file_img").attr("src");
                                var vimgUrl=$(that).parents(".uploadDiv").children(".proimg").attr('value');
                        		var imgUrlNew=$(that).parent().prev().attr("src");
                                var vimgUrlNew=$(that).parents(".uploadDiv").prev().children(".proimg").attr('value');
                        		$(that).parent().prev().attr("src",imgUrl);
                                $(that).parents(".uploadDiv").children(".proimg").attr('value',vimgUrlNew);
                        		$(that).parents(".uploadDiv").prev().find(".file_img").attr("src",imgUrlNew);
                                $(that).parents(".uploadDiv").prev().children(".proimg").attr('value',vimgUrl);
                        	}
                        </script>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">商品分类</td>
                        <td>
                            <select name="products_pid">
                                <option value="0">顶级分类</option>
                                {foreach name="arr" item="vo"}
                                <option value="{$vo['protype_id']}">{$vo['protype_name']}</option>
                                {/foreach}
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">商品编号</td>
                        <td>
                            <input name="products_number"  id="products_number" />
							<span></span>
                        </td>
                    </tr>

                    <tr>
                        <td width="80" align="right">产品标签</td>
                        <td>
                            <input id="products_label" name="products_labeling" value="" type="text"/><span></span><b>多个标签以'/'号隔开</b>
                            
                        </td>
                            
                    </tr>
                    <tr>
                        <td align="right">市场价</td>
                        <td>
                            <input name="products_marketprice"  id="products_marketprice" />
							<span></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">实际卖价</td>
                        <td>
                            <input name="products_sellingprice"  id="products_sellingprice"/>
							<span></span>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">商品规格</td>
                        <td>
                            <input name="products_specifications"  id="products_specifications"/><span></span><b>单位：g</b>
							
                        </td>
                    </tr>
                    <tr>
                        <td align="right">商品库存</td>
                        <td>
                            <input name="products_stock"  id="products_stock"/>
                            <span></span><b>单位：</b>
                        </td>
                    </tr>
                    <tr>
                        <td align="right" valign="top">产品详情</td>
                        <td>
                            <script src="/static/admin/ueditor/ueditor.config.js"></script>
                            <script src="/static/admin/ueditor/ueditor.all.min.js"></script>
                            <script src="/static/admin/ueditor/lang/zh-cn/zh-cn.js"></script>
                            <script>
                                //实例化编辑器
                                //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
                                UE.getEditor('content',{initialFrameWidth:800,initialFrameHeight:400,});
                            </script>
                            <!-- /KindEditor -->
                            <textarea id="content" name="content"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">排序</td>
                        <td>
                            <input type="number" id="products_sort" name="products_sort" value="" size="5" class="inpMain" />
                            <font style="display:none" class="adprotype_sort" color='red'>排序不能为空！</font>
                        </td>
                    </tr>

                    <tr>
                        <td></td>
                        <td>
                            <input type="hidden" name="token" value="b9439ae8" />
                            <input  class="btn" type="button" onclick='protype_add(this)' _id="1" value="提交" />
                            <input  class="btn" type="button" onclick='protype_add(this)' _id="2" value="保存" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        </div>
        <div class="clear"></div>
        <script type="text/javascript">
        	
            function protype_add(that){
            	var products_name_val=$("#products_name").val()
            	var products_introduction_val=$("#products_introduction").val()
            	var products_number_val=$("#products_number").val()
            	var products_label_val=$("#products_label").val()
            	var products_marketprice_val=$("#products_marketprice").val()
            	var products_sellingprice_val=$("#products_sellingprice").val()
            	var products_specifications_val=$("#products_specifications").val()
            	var products_stock_val=$("#products_stock").val()

            	if(products_name_val.length==0||products_name_val.length>10||products_name_val.length<3){
            		dialog.error("请输入商品名称")
            		return;
            	}
            	if(products_introduction_val.length==0||products_introduction_val.length>40||products_introduction_val.length<10){
            		dialog.error("请输入商品卖点")
            		return;
            	}
            	            	            	if(products_number_val.length==0||products_number_val.length>5||products_number_val.length<3){
            		dialog.error("请输入商品编号")
            		return;
            	}
            	            	            	            	if(products_label_val.length==0||products_label_val.length>50||products_label_val.length<1){
            		dialog.error("请输入商品标签")
            		return;
            	}
            	            	            	            	            	if(products_marketprice_val.length==0||products_marketprice_val.length>20||products_marketprice_val.length<1){
            		dialog.error("请输入市场价格")
            		return;
            	}
            	            	            	            	            	            	if(products_sellingprice_val.length==0||products_sellingprice_val.length>20||products_sellingprice_val.length<1){
            		dialog.error("请输入销售价格")
            		return;
            	}
            if(products_specifications_val.length==0||products_specifications_val.length>20||products_specifications_val.length<1){
            		dialog.error("请输入规格")
            		return;
            	}
            if(products_stock_val.length==0||products_stock_val.length>40||products_stock_val.length<1){
            		dialog.error("请输入库存")
            		return;
            	}

                var success_url="{:url('admin/product/index')}";
                var url="{:url('admin/product/add_goods')}";
                var admins=$("#myupload").serialize();
                var data_btn_val=$(that).attr("_id")
                var data_btn=$.param({data_btn:data_btn_val})
                var data=admins+"&"+data_btn
                    $.post(url,data,function(result){

                        if(result.status=='4')
                        {
                            dialog.success(result.message,success_url);
                        }else
                        {
                            dialog.error(result.message);
                        }
                    })
            }
            $("#products_name").on("blur",function(){
		        var val=$(this).val()	
		        if(val.length>=3&&val.length<=10){
		        	$(this).next("span").css("color","#00B83F")
		        	$(this).next("span").text("正确")
		        }else if(val.length==0){
		        	$(this).next("span").text("")
		        }else{
		        	$(this).next("span").css("color","#880000")
		        	$(this).next("span").text("请输入3到10个字")
		        }
			})
            $("#products_introduction").on("blur",function(){
		        var val=$(this).val()	
			        if(val.length>=10&&val.length<=40){
		        	$(this).next("span").css("color","#00B83F")
		        	$(this).next("span").text("正确")
		        }else if(val.length==0){
		        	$(this).next("span").text("")
		        }else{
		        	$(this).next("span").css("color","#880000")
		        	$(this).next("span").text("请输入10到40个字")
		        }
			})
            $("#products_number").on("blur",function(){
		        var val=$(this).val()	
		        if(val.length>=4&&val.length<=4){
		        	$(this).next("span").css("color","#00B83F")
		        	$(this).next("span").text("正确")
		        }else if(val.length==0){
		        	$(this).next("span").text("")
		        }else{
		        	$(this).next("span").css("color","#880000")
		        	$(this).next("span").text("请输入4位编号")
		        }
			})
            $("#products_label").on("blur",function(){
		        var val=$(this).val()	
		        if(val.length>=1&&val.length<=50){
		        	$(this).next("span").css("color","#00B83F")
		        	$(this).next("span").text("正确")
		        }else if(val.length==0){
		        	$(this).next("span").text("")
		        }else{
		        	$(this).next("span").css("color","#880000")
		        	$(this).next("span").text("请输入1到50个字")
		        }
			})
             $("#products_marketprice").on("blur",function(){
		        var val=$(this).val()	
		        if(val.length>=1&&val.length<=20){
		        	$(this).next("span").css("color","#00B83F")
		        	$(this).next("span").text("正确")
		        }else if(val.length==0){
		        	$(this).next("span").text("")
		        }else{
		        	$(this).next("span").css("color","#880000")
		        	$(this).next("span").text("请输入1-20位")
		        }
			})
            $("#products_sellingprice").on("blur",function(){
		        var val=$(this).val()	
		        if(val.length>=1&&val.length<=11){
		        	$(this).next("span").css("color","#00B83F")
		        	$(this).next("span").text("正确")
		        }else if(val.length==0){
		        	$(this).next("span").text("")
		        }else{
		        	$(this).next("span").css("color","#880000")
		        	$(this).next("span").text("请输入1-11个位")
		        }
			})
            $("#products_specifications").on("blur",function(){
		        var val=$(this).val()	
		        if(val.length>=1&&val.length<=11){
		        	$(this).next("span").css("color","#00B83F")
		        	$(this).next("span").text("正确")
		        }else if(val.length==0){
		        	$(this).next("span").text("")
		        }else{
		        	$(this).next("span").css("color","#880000")
		        	$(this).next("span").text("请输入1-11个位")
		        }
			})
            $("#products_stock").on("blur",function(){
		        var val=$(this).val()	
		        if(val.length>=1&&val.length<=11){
		        	$(this).next("span").css("color","#00B83F")
		        	$(this).next("span").text("正确")
		        }else if(val.length==0){
		        	$(this).next("span").text("")
		        }else{
		        	$(this).next("span").css("color","#880000")
		        	$(this).next("span").text("请输入1-11个位")
		        }
			})
        </script>
        {/block}